<template>
    <!-- 用户页面 -->
    <div class="myAccount">
        <a-row type="flex" justify="space-between" class="content">
      		<a-col :span="5" class="left-list">
                <ul>
                    <li v-for="item in list" :key="item.id" :class="{show: name == item.name}"  @click="gotoPage(item)">
                        {{item.text}}
                    </li>
                    <li @click="LogOut">登出</li>
                </ul>
            </a-col>
      		<a-col :span="19">
                <router-view></router-view>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import {logout} from '../assets/js/request.js'
import {mapMutations, mapState, mapGetters} from 'vuex'
export default {
    data() {
        return {
            list:[
                {id: 1, path: "/myaccount/mymessage", name: "MyMessage", text: "我的账号"},
                {id: 2, path: "/myaccount/myorder", name: "MyOrder", text: "我的订单"},
                {id: 3, path: "/myaccount/myaddress", name: "MyAddress", text: "配送地址簿"},
                {id: 4, path: "/myaccount/mydetails", name: "MyDetails", text: "账号信息"},
                {id: 5, path: "/myaccount/myreturns", name: "MyReturns", text: "退货"},
            ],
            name: "MyMessage",
        }
    },
    methods: {
        ...mapMutations('cart', ['DelVuexCart']),
        async LogOut() {
            await logout()
            this.$Cookie.remove("user")
            this.$Cookie.remove("token")
            localStorage.removeItem("cart")
            this.DelVuexCart()
            this.$router.push('/mylogout')
        },
        gotoPage(item) {
            this.name = item.name
            this.$router.push(item.path)
        }
    },
    watch: {
        $route:{
            immediate: true,
            handler() {
                this.name = this.$route.name
            }
        }
    }
}
</script>

<style lang='scss' scoped>
    .myAccount {
        width: 100%;
        background-color: #f0f1f3;
        .content {
            width: 90%;
            margin: 0 auto;
            padding: 50px 0 0;
            .left-list {
                padding: 41px 56px 60px 7px;
                border-right: 1px solid #737373;
                li {
                    padding: 15px 31px 16px;
                    color: #003150;
                    font-size: 14px;
                    margin-bottom: 5px;
                    &:hover {
                        background: #003150;
                        color: white;
                        a {
                            color: white;
                        }
                    }
                    a {
                       color: #003150; 
                    }
                }
                .show {
                    background: #003150;
                    color: white;
                }
            }
        }
    }
</style>